<template>
  <div id="app">
    <!-- 只保留音频通知组件，铃铛已移至Header中 -->
    <div v-if="!isLoginPage" class="audio-container">
      <AudioNotification ref="audioNotificationRef" />
      
      <!-- 添加后端连接状态组件，当调试模式开启时显示 -->
      <BackendStatus v-if="showDebugTools" />
    </div>
    
    <router-view v-if="isLoginPage" v-slot="{ Component }">
      <transition name="bounce" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
    <el-container v-else class="app-wrapper">
      <el-aside :width="isCollapse ? '96px' : '200px'" class="sidebar-container">
        <Sidebar />
      </el-aside>
      <el-container class="main-container">
        <el-header height="64px">
          <Header />
        </el-header>
        <el-main>
          <router-view v-slot="{ Component }">
            <transition name="zoom" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '@/stores/app'
import Header from '@/components/Header.vue'
import Sidebar from '@/components/Sidebar.vue'
import { ElMessage } from 'element-plus'
import AudioNotification from '@/components/AudioNotification.vue'
import BackendStatus from '@/components/BackendStatus.vue'
import { initWebSocket } from '@/utils/websocket'

const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
const isCollapse = computed(() => appStore.sidebarCollapsed)
const isLoginPage = computed(() => route.path === '/login')
const process = { env: { NODE_ENV: 'development' } }
const audioNotificationRef = ref(null)

// 是否显示调试工具
const showDebugTools = ref(false)

// 切换调试工具显示状态
const toggleDebugTools = () => {
  showDebugTools.value = !showDebugTools.value
  ElMessage.info(showDebugTools.value ? '已启用调试工具' : '已关闭调试工具')
}

// 调试订单路由 - 方法1
const debugOrdersRoute = () => {
  console.log('调试按钮1点击, 当前路径:', route.path)
  
  // 强制加载订单页面
  router.push('/')
    .then(() => {
      console.log('重置路由到首页')
      setTimeout(() => {
        router.push({ path: '/orders', replace: true })
          .then(() => {
            console.log('订单页面加载成功, 新路径:', router.currentRoute.value.path)
            ElMessage.success('订单页面已加载')
          })
          .catch(err => {
            console.error('订单页面加载失败:', err)
            ElMessage.error(`加载失败: ${err.message}`)
          })
      }, 100)
    })
}

// 调试订单路由 - 方法2
const debugOrdersRouteAlt = () => {
  console.log('调试按钮2点击, 当前路径:', route.path)
  
  try {
    // 直接尝试加载订单组件
    const OrderFixComponent = () => import('@/views/orders/index.vue')
    console.log('订单组件加载:', OrderFixComponent)
    
    // 导航到订单页面
    router.push({ 
      name: 'Orders',  
      params: { forceReload: Date.now() } 
    })
    .then(() => {
      console.log('订单页面导航成功')
      ElMessage.success('订单页面加载方式2')
    })
    .catch(err => {
      console.error('订单导航错误:', err)
      ElMessage.error('导航失败:' + err.message)
    })
  } catch (err) {
    console.error('加载订单组件失败:', err)
    ElMessage.error('组件加载失败:' + err.message)
  }
}

// 测试备用路由
const debugOrdersTest = () => {
  console.log('测试备用路由, 当前路径:', route.path)
  
  router.push('/orders-test')
    .then(() => {
      console.log('测试路由导航成功')
      ElMessage.success('订单测试页面已加载')
    })
    .catch(err => {
      console.error('测试路由导航失败:', err)
      ElMessage.error('测试导航失败:' + err.message)
    })
}

// 检查组件状态
const logComponentStatus = () => {
  console.log('当前路由信息:', router.currentRoute.value)
  console.log('路由映射:', router.getRoutes())
  
  try {
    const ordersPath = require.resolve('@/views/orders/index.vue')
    console.log('订单组件路径:', ordersPath)
    ElMessage.success('组件存在')
  } catch (err) {
    console.error('找不到订单组件:', err)
    ElMessage.error('找不到组件:' + err.message)
  }
}

// 监听路由变化并输出调试信息
onMounted(() => {
  console.log('当前路由:', route.path)
  console.log('应用已加载, 路由列表:', router.getRoutes().map(r => r.path))
  
  // 添加全局导航守卫，检测路由变化
  router.beforeEach((to, from, next) => {
    console.log('路由变化:', from.path, '->', to.path)
    next()
  })
  
  // 如果不是登录页，初始化WebSocket
  if (!isLoginPage.value) {
    const userId = localStorage.getItem('userId') || sessionStorage.getItem('userId') || 'admin'
    setTimeout(() => {
      initWebSocket(userId)
    }, 2000)
  }
  
  // 添加快捷键切换调试工具
  window.addEventListener('keydown', (e) => {
    // 按下Alt+D显示调试工具
    if (e.altKey && e.key === 'd') {
      toggleDebugTools()
    }
  })
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.app-wrapper {
  height: 100vh;
}

.sidebar-container {
  background-color: #304156;
  transition: width 0.3s;
  overflow-x: hidden;
}

.main-container {
  height: 100vh;
  overflow: hidden;
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  line-height: 64px;
}

.el-main {
  padding: 20px;
  background-color: #f0f2f5;
  overflow-y: auto;
}

/* 路由过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 滑动效果 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease-out;
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-right-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 新增过渡动画效果 */
/* 弹跳效果 */
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-out 0.5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: scale(0.9);
    opacity: 0;
  }
}

/* 缩放效果 */
.zoom-enter-active,
.zoom-leave-active {
  transition: all 0.4s ease;
}
.zoom-enter-from {
  opacity: 0;
  transform: scale(0.95);
}
.zoom-leave-to {
  opacity: 0;
  transform: scale(1.05);
}

/* 音频容器样式 */
.audio-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
}

/* 订单通知样式 */
.order-notification {
  max-width: 350px !important;
  z-index: 9999 !important;
  word-wrap: break-word !important;
}

.reminder-notification {
  max-width: 350px !important;
  z-index: 9999 !important;
  word-wrap: break-word !important;
}

/* 修复Element Plus消息通知样式 */
.el-notification {
  max-width: 350px !important;
  overflow: hidden !important;
}

.el-notification__content {
  text-align: left !important;
  word-break: break-all !important;
  max-width: 100% !important;
}
</style>
